<template>
    <div>
        <el-table
                :data="orderData"
                border
                style="width: 100%">
            <el-table-column
                    label="商品信息"
                    width="260"
            >
                <template scope="scope">
                    <div class="product-box">
                        <img :src="scope.row.product_content.head_img" class="head-img" />
                        <div>
                            <p>{{scope.row.product_content.product_name}}</p>
                            <p>数量：{{scope.row.num}}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="integral"
                    label="支付积分"
                    width="80">
            </el-table-column>
            <el-table-column
                    label="收货信息"
                    width="200"
            >
                <template scope="scope">
                    <p>收货人：{{scope.row.name}}</p>
                    <p>联系方式：{{scope.row.phone}}</p>
                    <p>地址：{{scope.row.sheng + scope.row.shi + scope.row.qu + scope.row.address}}</p>

                </template>
            </el-table-column>
            <el-table-column
                label="下单时间"
            >
                <template scope="scope">
                    {{$util.timeStampToTime(scope.row.order_pay_time)}}
                </template>
            </el-table-column>
            <el-table-column
                label="订单状态"
                width="100"
            >
                <template scope="scope">
                    {{scope.row.status === "1" ? "待发货" : "已发货"}}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
            >
                <template scope="scope">
                    <el-button type="text" @click="checkOrderDetail(scope.row)">查看</el-button>
                    <el-button type="text" @click="sendGoods(scope.row)" v-if="scope.row.status == 1">发货</el-button>
                </template>

            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "integral-order-tab.vue",
        props: {
            orderData: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        methods: {
            checkOrderDetail(row) {
                // console.log(row);
                this.$router.push({
                    name: 'integralOrderDetail',
                    params: {
                        id: row.id
                    }
                })
            },
            sendGoods(row){
                let html = `<div class="msg-div" style="margin-top:10px;display: flex;flex-flow: row nowrap;align-items: center">
                                <span>快递公司：</span>
                                <input
                                    placeholder="请输入快递公司"
                                    v-model="express"
                                    class="express"
                                    style="flex:1;height:30px;border-radius:5px;outline-color: #3a8ee6;border:1px solid #3a8ee6;box-sizing: border-box;padding:0 5px; ">
                                </div>
                            <div class="msg-div" style="margin-top:10px;display: flex;flex-flow: row nowrap;align-items: center">
                                <span>快递单号：</span>
                                <input
                                    placeholder="请输入快递单号"
                                    v-model="express_num"
                                    class="express_num"
                                    style="flex:1;height:30px;border-radius:5px;outline-color: #3a8ee6;border:1px solid #3a8ee6;box-sizing: border-box;padding:0 5px;">
                                </div>`;
                this.$confirm(html,'发货信息',{
                    dangerouslyUseHTMLString:true,
                    confirmButtonText:'提交',
                    cancelButtonText:'取消'
                }).then(()=>{
                    let experss = document.getElementsByClassName('express')[0].value
                    let experss_num = document.getElementsByClassName('express_num')[0].value
                    this.express = experss;
                    this.express_num = experss_num;
                    this.expressNum(row.id)
                    document.getElementsByClassName('express_num')[0].value = ''
                }).catch(()=>{
                    // console.log('取消');
                })
            },
            //确认发货
            async expressNum(id){
                console.log(this.express_num);
                let res = await this.$Http.sendIntegralOrder({
                    id:id,
                    express:this.express,
                    express_num:this.express_num
                })
                console.log(res);
                if(res.code == 200){
                    this.$message.success('快递信息录入！');
                    // this.getOrderList()
                    this.$emit('reloadTab')
                }
            },
        }
    }
</script>

<style scoped>
    .product-box {
        display: flex;
        flex-flow:row nowrap;
        align-items: center;
        font-size: 12px;
    }
    .head-img{
        width: 60px;
        margin-right: 10px;
    }
    p {
        margin: 0;
    }
</style>
